<template>
    <div class="container">
        <div class="left">
            <span>地区：</span>
        </div>
        <ul class="right" >
            <li :class="{'active':regionString === ''}" @click="regionString=''" >全部</li>
            <li  :class="{'active':regionString === item.value }" v-for="item in HopspitalReginList" @click="changeRegin(item.value)" >{{ item.name }}</li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import {getHospitalLevelAndReginApi} from '@/api/home/index.ts'

import { onMounted, ref } from 'vue'

import type {HospitalLevel} from '@/api/home/type.ts'

const HopspitalReginList = ref<HospitalLevel[]>([])

const regionString = ref('')

onMounted(() => {
    getReginList()
})


// 点击地点时调用的方法

const changeRegin = (regionNumber:string) => {
    regionString.value=regionNumber
}

// 得到医院地区的方法
const getReginList =async () => {
    const res = await getHospitalLevelAndReginApi('Beijin')
    HopspitalReginList.value = res.data

}

</script>

<script lang="ts">
    export default {
        name:'ReginList'
    }
</script>

<style lang="scss" scoped>
    .container {
        margin-top: 10px;
        display: flex;
        color:#7f7f7f;
        .left {
            width: 70px;
        }
        .right {
            display: flex;
            flex-wrap: wrap;
            li {
                margin-top: 10px;
                margin-right: 10px;
                &:hover {
                    cursor: pointer;
                    color:#55a6fe;
                }
            }
            .active {
                color:#55a6fe;
            }
        }
    }
</style>